<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /* 添加基本样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 50%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        button {
            padding: 8px 16px;
            margin-right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="app">
        <table border="">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(stu,i) in stus">
                <td>{{stu.id}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>
                    <button @click="del(i)">删除</button>
                    <button @click="edit(i)">修改</button>
                </td>
            </tr>
        </table>
        id:<input type="text" v-model="id" /><br />
        name:<input type="text" v-model="name" /><br />
        age:<input type="text"  v-model="age" /><br />
        <button @click="addOrSave">添加/保存</button>
    </div>
    <script>            
        var app = Vue.createApp({
            data(){
                return {
                    id:'',
                    name:'',
                    age:'',
                    currentEditIndex: -1, 
                    stus:[ 
                        {
                            id:1,
                            name:"张三",
                            age:"18"
                        },
                        {
                            id:2,
                            name:"李四",
                            age:"19"
                        }
                    ]
                }
            },
            methods:{ 
                addOrSave: function(){ 
                    if (this.currentEditIndex >= 0) {
                        this.stus[this.currentEditIndex] = {
                            id: this.id,
                            name: this.name,
                            age: this.age
                        };
                        this.currentEditIndex = -1;
                    } else {
                        this.stus.push({
                            id: this.id,
                            name: this.name,
                            age: this.age
                        });
                    }
                    this.id = '';
                    this.name = '';
                    this.age = '';
                },
                del: function(i){ 
                    this.stus.splice(i,1)
                },
                edit: function(i){
                    this.currentEditIndex = i;
                    this.id = this.stus[i].id;
                    this.name = this.stus[i].name;
                    this.age = this.stus[i].age;
                }
            }
        });
        var vm = app.mount("#app")
    </script>
</body>
</html>